<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:cc="http://java.sun.com/jsf/composite"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <!-- INTERFACE -->
    <cc:interface>

        <cc:facet name="operaciones"/>
        <cc:facet name="filtros"/>
        <cc:facet name="centro"/>
    </cc:interface>

    <!-- IMPLEMENTATION -->
    <cc:implementation>

        <style>

            .button { padding: .5em 1em; text-decoration: none; 
                      -webkit-transform: rotate(-90deg)!important;

                      /* Firefox */
                      -moz-transform: rotate(-90deg);

                      /* IE */
                      -ms-transform: rotate(-90deg);

                      /* Opera */
                      -o-transform: rotate(-90deg);

                      /* Internet Explorer */
                      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
            }
            .menu { width:300px;min-height:750px;  padding: 0.4em; position: relative; display: inline-block;float: left;}
            .menu h3 { margin: 0; padding: 0.4em; text-align: center; }
            .ui-accordion .ui-accordion-header a {
                display: block;
                font-size: 10pt;
                padding: 0.5em 0.5em 0.5em 2.2em;
                text-align: left;
            }

        </style>

        <script type="text/javascript">
            $ = jQuery;
            var openOperaciones = false;    
            var openFiltros = false;    
            
            $(document).ready(function() {
                
                if(openOperaciones){
                    $( "#filtros" ).hide( "fade", {}, 1 );
                } else if(openFiltros){
                    $( "#operaciones" ).hide( "fade", {}, 1 );
                } else{
                    $( "#filtros" ).hide( "fade", {}, 1 );
                    $( "#operaciones" ).hide( "fade", {}, 1 );
                }
            });
            $(function() {
                // run the currently selected effect
                function runEffect() {
                    // get effect type from 
                    var selectedEffect = "slide";
                    
			
                    // most effect types need no options passed by default
                    var options = {};
                    // some effects have required parameters
                    if ( selectedEffect === "scale" ) {
                        options = { percent: 0 };
                    } else if ( selectedEffect === "size" ) {
                        options = { to: { width: 200, height: 60 } };
                    }
			
                    // run the effect
                    $( "#filtros" ).hide( "fade", {}, 1 );
                    $( "#operaciones" ).toggle( selectedEffect, options, 500 );
                    
                    
                    
        
                    //                    
                
                };
                
                function runEffect2() {
                    // get effect type from 
                    var selectedEffect = "slide";
                    
			
                    // most effect types need no options passed by default
                    var options = {};
                    // some effects have required parameters
                    if ( selectedEffect === "scale" ) {
                        options = { percent: 0 };
                    } else if ( selectedEffect === "size" ) {
                        options = { to: { width: 200, height: 60 } };
                    }
			
                    // run the effect
                    $( "#operaciones" ).hide( "fade", {}, 1 );
                    $( "#filtros" ).toggle( selectedEffect, options, 500 );
                    
                    
                    
                    //                    
                
                };
		
                // set effect from select menu value
                $( "#button" ).click(function() {
                    runEffect();
                    return false;
                });
                
                $( "#button2" ).click(function() {
                    runEffect2();
                    return false;
                });
                
            });
        </script>


        


        <h:panelGrid columns="1" cellpadding="0" cellspacing="0">
            <a href="#" id="button" class="button fondoGris" style="position: absolute;top:128px;left: -10px;">Operaciones</a>
        </h:panelGrid>

        <h:panelGrid columns="1" cellpadding="0" cellspacing="0">
            <a href="#" id="button2" class="button fondoGris" style="position: absolute;top:220px;left: 11px;">Filtros</a>
        </h:panelGrid>
        <table width="100%">
            <tr>
                <td width="0%">
                    <div class="demo" style="margin-left: 40px;">

                        <div class="toggler">
                            <div id="operaciones" class="ui-widget-content ui-corner-all menu" >
                                <h3 class="ui-widget-header ui-corner-all" style="text-align: left; padding-left: 10px">Operaciones</h3>
                                <cc:renderFacet name="operaciones"/>
                            </div>
                            <div id="filtros" class="ui-widget-content ui-corner-all menu" >
                                <h3 class="ui-widget-header ui-corner-all" style="text-align: left; padding-left: 10px">Filtros</h3>
                                <cc:renderFacet name="filtros"/>
                            </div>
                        </div>
                    </div>
                </td>
                <td width="100%">
                    <div id="resultado" style="padding: 0.4em; min-height:750px; z-index: -1" 
                         class="ui-widget-content ui-corner-all">
                        <cc:renderFacet name="centro"/>
                    </div>
                </td>
            </tr>
        </table>



    </cc:implementation>
</html>